<template lang="pug">
  d2-container(:filename="filename")
    el-card(shadow="never")
      div(slot="header",class="clearfix")
        span 帖子管理
      
      el-form(:inline="true",size="small")
        el-form-item
          submit-button(type="danger",:loading="recyling",@click="recyle")
            i(class="el-icon-delete")
            span 放入回收站
          refresh-button(:loading="querying",@click="getPosts")

      el-table(border,:data="paged.items",@selection-change="selectionChange",@filter-change="filterHandler",ref="table")
        el-table-column(type="selection", align="center")
        el-table-column(label="帖子标题",prop="title")
          template(slot-scope="scope") 
            span(v-if="scope.row.title") {{scope.row.title}}
            i(v-else) <无标题>
        el-table-column(label="作者",width="120px", show-overflow-tooltip, prop="wxUserName")
        el-table-column(label="帖子状态",
                        width="100px", 
                        show-overflow-tooltip, 
                        prop="statusName",
                        align="center",
                        :filters="[{text: '已发布',value: 1},{text: '已发布',value: 2}]")
        el-table-column(label="发帖时间",width="180px")
          template(slot-scope="scope")
            span {{scope.row.createAt | format('YYYY年MM月DD日 HH:mm')}}
        el-table-column(label="",width="120px",align="center")
          template(slot-scope="scope")
            a(:href="`#/post/detail?postId=${scope.row.id}`") 查看帖子
      awesome-pagination(:total="paged.totalCount",:page="page",@change="getPosts")
</template>

<script>
import Vue from "vue";
import { RefreshButton } from "@/components/aws-comp";
Vue.component(RefreshButton.name, RefreshButton);

import axios from '@/plugin/axios'
import PageList from '@/mixins/PageList'

export default {
  name: "post-index",
  mixins: [PageList],
  data() {
    return {
      filename: __filename,
      querying: false,
      paged: {},
      page:{maxResultCount: 15, skipCount: 0},
      /**
       * 回收中
       */
      recyling: false,
    };
  },
  methods: {
    getPosts(){
      const data = { page: this.page, filter: {} };
      const options = {url: 'post/getPosts', method: 'post', data};
      const vm = this;
      this.querying = true;
      axios(options).then((paged)=> {
        vm.paged=paged;
        vm.querying = false
      }).catch(()=>{
        vm.querying = false;
      })
    },
    recyle(){
      this.isDeleteConfirm('确定放入回收站吗？').then(()=> this.doRecycle()).catch(()=>{});
    },
    doRecycle(){
      const data = {ids: this.selectedIds }
      const options = {url: 'post/Recycle', method: 'post', data: data}
      const vm = this;
      this.recyling = true;
      axios(options).then(()=> {
        vm.recyling = false
        vm.showSuccess('成功放入回收站')
      }).catch(()=>{
        vm.recyling = false;
      })
    },
    filterHandler(){
      console.log(this.$refs.table);
      console.log(arguments);
    }
  },
  created(){
    this.getPosts();
  }
};
</script>
